<template>
  <a-card :loading="loading">
    <template slot="title">
      <h2 class="title">
        {{dataSouce.title}}
      </h2>
    </template>
    <template slot="extra">
      <a-button type="primary"  icon="close" @click="$emit('closeDetail')"/>
    </template>
    <img class="cover" slot="cover" v-if="dataSouce.icon" :src="BaseUrl + dataSouce.icon" />
    <template slot="actions" class="ant-card-actions">
      <span @click="handleEdit" v-has="'chronicle:edit'">
        <a-icon type="edit" style="margin-right: 8px" />
        编辑
      </span>
      <a-popconfirm style="margin-left:10px" title="确定删除?" v-has="'chronicle:delete'" @confirm="() => $emit('delete',dataSouce.id)">
        <a-icon type="delete" style="margin-right: 8px" />
        删除
      </a-popconfirm>
      <span key="updateTime">{{dataSouce.createTime}}</span>
    </template>
    <div class="describe" v-if="dataSouce.simpleContent">{{dataSouce.simpleContent}}</div>
    <div class="content" v-html="dataSouce.content"></div>
  </a-card>
</template>

<script>
import { getAction, postAction, deleteAction } from '@/api/manage'
export default {
  name: 'ChronicleDetail',
  props: {
    id: [String, Number]
  },
  data() {
    return {
      title: '',
      visible:false,
      loading: false,
      cover: '',
      BaseUrl: window._CONFIG['domianURL']+ '/sys/common/static/',
      queryParam: {
        id: ''
      },
      url: {
        queryById: '/memorabilia/queryById'
      },
      dataSouce: {}
    }
  },
  created() {
    // this.queryParam.id = this.$route.query.id
    // if (this.queryParam.id) {
    //   this.loadData(this.queryParam.id)
    // }
  },
  watch: {
    id(nv) {
      if (nv) {
        this.loadData(nv)
      }
    }
  },
  methods: {
    handleEdit(){
      this.$emit('onedit',this.dataSouce)
    },
    loadData(id) {
      this.loading = true
      getAction(this.url.queryById, { id }).then(res => {
        this.dataSouce = res.result
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.title{
  font-size: 28px;
  margin-bottom: 0;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden; 
}
.describe{
  padding: 15px;
  background: #efefef;
}
.content{
  margin-top: 20px;
  padding: 15px;
}
.cover{
  width: 60%;
  margin: 20px auto;
}
</style>
